<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Loading 加载</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">区域加载</el-divider><!-- =============================================================== -->
	<p class="desc">在需要的时候展示加载动画，防止页面失去响应提高用户体验（例如表格）。</p>
	<p class="desc">Element Plus 提供了两种调用 Loading 的方法：指令和服务。 对于自定义指令 v-loading，只需要绑定 boolean 值即可。 默认状况下，Loading 遮罩会插入到绑定元素的子节点。 通过添加 body 修饰符，可以使遮罩插入至 Dom 中的 body 上。</p>
	<el-table :data="tableData" v-loading="loading">
		<el-table-column property="date" label="Date" width="150"></el-table-column>
		<el-table-column property="name" label="Name" width="200"></el-table-column>
		<el-table-column property="address" label="Address"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">自定义加载中组件内容</el-divider><!-- =============================================================== -->
	<p class="desc">你可以自定义加载中组件的文字，图标，以及背景颜色。</p>
	<p class="desc">在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。 类似地，element-loading-spinner、element-loading-background 和 element-loading-svg 属性分别用来设定 svg 图标、背景色值、加载图标。</p>
	<el-table :data="tableData" v-loading="loading" element-loading-text="Loading..." :element-loading-spinner="svg" element-loading-background="rgba(122, 122, 122, 0.8)">
		<el-table-column property="date" label="Date" width="150"></el-table-column>
		<el-table-column property="name" label="Name" width="200"></el-table-column>
		<el-table-column property="address" label="Address"></el-table-column>
	</el-table>
	
	<el-divider content-position="left">让加载组件铺满整个屏幕</el-divider><!-- =============================================================== -->
	<p class="desc">加载数据时显示全屏动画。</p>
	<p class="desc">当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上） 此时若需要锁定屏幕的滚动，可以使用lock修饰符； 当使用服务方式时，遮罩默认即为全屏，无需额外设置。</p>
	<el-button v-loading.fullscreen.lock="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0.8)" type="primary" @click="openFullScreen1">指令方式</el-button>
	<el-button type="primary" @click="openFullScreen2">服务方式(推荐使用)</el-button>
	
	
</div>

</body>
<script>
const svg = `<circle class="path" cx="50" cy="50" r="20" fill="none"></circle>`;
const Main = {
	data() {
		return {
			loading: true,
			tableData: [
				{date: '2016-05-02',name: 'Peter Parker1',address: 'Queens, New York City1',},
				{date: '2016-05-04',name: 'Peter Parker2',address: 'Queens, New York City2',},
				{date: '2016-05-01',name: 'Peter Parker3',address: 'Queens, New York City3',},
				{date: '2016-05-03',name: 'Peter Parker4',address: 'Queens, New York City4',},
			],
			svg: svg,
			
			fullscreenLoading: false,
		}
	},
	methods:{
		openFullScreen1(){
			this.fullscreenLoading = true;
			setTimeout(()=>{
				this.fullscreenLoading = false;
			}, 2000);
		},
		openFullScreen2(){
			const loading = ElementPlus.ElLoading.service({
				lock: true,
				text: 'Loading',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			setTimeout(() => {
				loading.close();
			}, 2000);
		},
		
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>